<script lang="ts" setup>
import type { UnwrapRef } from 'vue';

const props = defineProps(['loading']);
// 数据处理
const data = ref<VAPI.engineerDataItem[]>([]);

const columns: any = [
  {
    title: '工时月份',
    dataIndex: 'workmonth',
    align: 'center',
    width: '20%',
    key: 'workmonth',
  },
  {
    title: '成员姓名',
    dataIndex: 'employeename',
    sorter: true,
    align: 'center',
    width: '20%',
    key: 'employeename',
  },
  {
    title: '成员ID',
    dataIndex: 'employeeid',
    align: 'center',
    width: '20%',
    key: 'employeeid',
  },
  {
    title: '复核工时',
    dataIndex: 'reviewedhours',
    align: 'center',
    width: '20%',
    key: 'reviewedhours',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'lastColumn',
    width: '20%',
    align: 'center',
  },
];

const editableData: UnwrapRef<Record<string, any>> = reactive({});

// const selectedRowKeys: Ref<any> = inject('selectedId') as Ref<any>;

// function onSelectionChange(newSelectedRowKeys: any[]) {
//   selectedRowKeys.value = newSelectedRowKeys;
// }

// 删除单条
// async function deleteSingleRecord() {
// }

const pageSize = ref<number>(10);
const current = ref<number>(1);
async function handleTableChange(pagination: any) {
  pageSize.value = pagination.pageSize;
  current.value = pagination.current;
  // await getPage(current.value, pageSize.value);
}
</script>

<template>
  <a-table
    :columns="columns" :row-key="(record: any) => record.employeeId" :data-source="data" :loading="props.loading"
    :pagination="{ pageSize, showQuickJumper: true }" :scroll="{ x: 1024 }" @change="handleTableChange"
  >
    <template #bodyCell="{ column, text, record }">
      <template
        v-if="['workmonth', 'employeename', 'employeeid', 'reviewedhours'].includes(column.dataIndex as string)"
      >
        <div>
          <a-input
            v-if="editableData[record.id]" v-model:value="editableData[record.id][column.dataIndex as string]"
            style="margin: -5px 0;"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'operation'">
        <div class="editable-row-operations">
          <span v-if="editableData[record.id]">
            <a-typography-link>保存</a-typography-link>
            <a>取消</a>
          </span>
          <span v-else>
            <a-space>
              <a>编辑</a>
              <a v-if="data.length">删除</a>
            </a-space>
          </span>
        </div>
      </template>
    </template>
  </a-table>
</template>

<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
